<template>
    <NavBar></NavBar>
    <ContentField>
     <h2 style="text-align:center;margin-bottom: 20px;">创建班级</h2>

     <form @submit.prevent="addClass">
        <div class="mb-3">
            <label for="classId" class="form-label">&nbsp;&nbsp;班级号(classId): </label>
            <input type="text" v-model="classId" class="form-control" id="classId"> 
        </div>
        <div class="mb-3">
            <label for="tId" class="form-label">&nbsp;&nbsp;教师id(tId): </label>
            <span type="text" class="form-control" id="tId">{{ tId }}</span>
        </div>
        <div class="mb-3">
            <label for="cnt" class="form-label">&nbsp;&nbsp;班级人数(cnt): </label>
            <span type="text" class="form-control" id="cnt" required>0</span>
        </div>
        <span style="color:red; text-align:center; display:block;">{{ error_message }}</span>
        <div align="center">
            <button type="submit" class="btn btn-primary" style="width:20%;">添加</button>
        </div>
    </form>
    </ContentField>
 </template>
 

 <script>
 
 import NavBar from "@/components/teacher/NavBar.vue";
 import ContentField from '@/components/commons/ContentField.vue';
 import {useStore} from 'vuex';
 import {useRoute} from 'vue-router';
 import {ref} from 'vue';
 import $ from 'jquery';
 import router from '@/router/index';

 export default{
     name: 'addPro',
     components: {
         NavBar,
         ContentField,
     },
     setup(){
    
        const store = useStore();
        const route = useRoute();

        let classId = ref('');
        let tId = route.params.teacherId;
        let cnt = 0;  //班级初始默认人数为0
        let error_message = ref('');

        const addClass = () => {
            $.ajax({
                url: "http://localhost:8090/sls/class/addClass",
                type: 'post',
                data: {
                    classId: classId.value,
                    tId: tId,
                    cnt: cnt,
                },
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                    console.log(resp);
                    if(resp.error_message === 'success'){
                        router.push({name: 'classManage'});
                    }
                    else{
                        error_message.value = resp.error_message;
                    }
                },
                error(resp){
                    console.log(resp);
                }
            });
        }

        return{
            addClass,
            classId,
            tId,
            cnt,
            error_message,

        }

     }

 }
 
 </script>
 
 
 
 <style scoped>

 </style>